<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="components-demo">
        <button-open></button-open>
      </div>
</body>
</html>
<script>
    Vue.component('button-open', {
    data: function () {
        return {
            close:false
        }
    },
    template: `
        <div @click="open">
            <div v-if="close==false" style="width:80px;height:36px;background:#DCDFE6;border-radius:18px;margin-top:10px">
                <div style="width:35px;height:35px;border-radius:18px;background:#fff;border:1px solid #DCDFE6"></div>
            </div>
            <div v-if="close==true" style="width:80px;height:36px;background:#42b983;border-radius:18px;margin-top:10px">
                <div style="width:35px;height:35px;border-radius:50%;background:#fff;margin-left:45px;border:1px solid #42b983"></div>
            </div>
        </div>
    `,
    methods:{
        open:function(){
            this.close = !this.close
        }
    }
    })
    new Vue({ el: '#components-demo' })
</script>


